Selteco 
Alligator Flash Designer 8 
User's guide 


Welcome to Alligator Flash Designer 


Alligator Flash Designer enables you to create interactive Flash content with graphics, animation, navigation and 
sound. 


Frames 


Alligator Flash Designer is similar to PowerPoint. Your animation will contain one or more frames. Frames are like 
scenes. By default each frame will appear for 3 second. The animation starts at the first frame "Frame 1" and 
loops after it's finished. 


See also: Working with Frames 

To preview your Flash animation 

You can preview the animation by pressing F9 key (or choose "Movie" > "Play Animation") 
If no content appears when you click the preview button or hit F9 key: 


Run Internet Explorer and choose Tools > Internet Options. 
Choose the Advanced tab, then scroll to the Security section. 
Enable "Allow active content to run in files on my computer". 
Click OK. 
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To export the Flash file 
To publish the animation export it to a SWF file, and include it in your web page. 


>» Choose "File" > "Export Flash SWF file" and specify a file name 
>» Choose "File" > "View HTML Code" to copy the HTML code 
>» Open your web page in HTML view and paste the HTML code 


You can also export an entire HTML page, to do so choose "File" > "Export Web Page" command. 

See Flash Export 

To create a slide show 

If you want to use existing photos to create a slide show choose "File" > "Wizards" > "Slide Show" command. 
See Slide Shows 

To insert a link to a web page 


Select the item and choose "Action" > "On Click". Check "Get URL" and type the link for example 
http://www.selteco.com. 


See Buttons and Actions 
To share items between frames 
To optimize your Flash file create a master frame and place shared objects on this frame. 


See Frames 


To save and open Alligator Flash Designer projects 


Choose File > Open and File > Save to open and save Alligator Flash Designer project files. Alligator saves 
project files in SFD file format. It is not possible to open and edit FLA or SWF files. 


To import Flash files from other programs 


To import Flash SWF file and place it on the frame choose "Insert" > "Flash" (the SWF file must be available at 
specified path so Flash player can locate it and load it). To load Flash SWF file and embed it on the frame choose 
Insert > Embeded SWF Clip. Alligator can not edit SWF files. 


Tutorials 


If you have no idea how to start we suggest that you complete these tutorials first. 
See Beginner Tutorials 


More tutorials online: www.flashdesignerzone.com/tutorials/ 


Tutorial 1 


In this tutorial you will create your first Flash animation. It will display "Tutorial 1" message. You will learn how 
to: 

> Specify animation size and background color. 

> Create a text object. 


> Apply Intro and Outro effects. 


> Preview your Flash animation. 
> Export SWF file. 


To launch the program double-click Alligator Flash Designer icon on the desktop. 
Click on OK button if you are running unregistered version. 

Choose Blank Document in the Welcome dialog and click OK. 

Alligator Flash Designer main window should open with "Flash-1" document. 

From the Frame menu choose Frame Size command. 

Specify animation size. Put 300 as "Width" and 60 as "Height". Click OK to confirm. 
From the Frame menu choose Background Color command. 

Color selection dialog should appear. 
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Choose your favorite color. You can also click "Standard Colors" and choose one of the standard colors. 
Press OK to confirm your selection. 
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From the toolbox choose the "Text" tool: 
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11. Position the mouse cursor over the background rectangle and click left mouse button. 
12. Text edit dialog should appear. 

13. Enter "Tutorial 1" in the edit box. 

14. Click Set font button. 

15. Font selection dialog should appear. 

16. Change the font size to "26". 

17. Click OK twice to confirm font size and to draw the text. 


18. You can move your text using the "Select" tool. 
k 


19. Choose Intro > Blink command. 

20. Choose Outro > Span command. 

21. Press F9 to preview your animation. 

22. Press "Alt+F4" key to quit preview window. 


23. From the Frame menu choose Insert command and click OK. Observe a new frame (Frame 2) in the "Frame 
List". Press "Page Up" and "Page Down" keys to navigate between the frames. 


24. From the File menu choose Export Web Page command, click OK to leave default options. 
25. From the Save In dropdown list choose Desktop (or navigate to desktop using folder list). 
26. Leave default file name and click Save button to create Flash file. 

27. HTML page should popup in a browser window. Scroll the page down to view HTML code. 


28. Activate Alligator Flash Designer minimized window and choose Exit command to quit. Click "No" in "Save 
changes" prompt dialog. 
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"Button" Animation 


In this tutorial you will create a button that will change when you drag your mouse over it. You will learn how to: 


> Use Master Frames. 


>» Define "OnOver", "OnClick" and "OnOut" events. 


1. To launch the program double-click Alligator Flash Designer icon on the desktop. 
2. Click OK button if you are running Unregistered Version. 
3. Choose Blank Document in the Welcome dialog and click OK. 
4. Alligator Flash Designer main window should open with "Flash-1" document. 
5. From the Frame menu choose Frame Size command. 
6. Specify animation size. Put 200 as "Width" and 200 as "Height". Click OK to confirm. 
7. From the Frame menu choose Frame Delay command. 
8. Check "Stop at this frame" and click OK. 
9. Choose Frame > Insert and click OK to add Frame 2. 
10. Choose Movie > Add Master Frame to add Master Frame (1). 
11. From the Frame menu choose Background Color command. 
12. Color selection dialog should appear. 
13. Choose your favorite color. Press OK to confirm your selection. 
14. From the toolbox choose the "Ellipse tool" 
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15. Click and drag to draw an ellipse. Center the ellipse with Edit > Align > Center on Page 
16. Press "Page Down" twice to go to Frame 2. 
17. From the toolbox choose the "Text" tool: 
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18. Click left mouse button inside the ellipse. 

19. Text edit dialog should appear. 

20. Enter "Click me" in the edit box and click OK. 

21. Center the text with Edit > Align > Center on Page. You can also move the text by pressing arrow keys. 
22. Press Page Up twice to go to the "Master Frame (1)" or select it in the "Frame List" box. 

23. Make sure the ellipse is selected (handles visible). Select it with the selection tool if necessary. 
24. From the Action menu choose On Over command. 

25. In "On Over" dialog choose "Go to Frame", and select "Frame 2". Click OK. 

26. From the Action menu choose On Out command. 

27. In "On Out" dialog choose "Go to Frame", and select "Frame 1". Click OK. 

28. From the Action menu choose On Up command. 

29. In "On Up" dialog choose "Get URL or file". 


30. Type the link to your web site (or you can type "http://www.selteco.com"). The link must begin with 
"http://". Select "_blank" as the target to open the link in a new window. Click OK. 


31. Press F9 and observe your animation playing. Move the cursor over the ellipse. 

32. Press "Alt+F4" key to quit preview window. 

33. From the File menu choose Export Web Page command, click OK to leave default options. 
34. From the Save In dropdown list choose Desktop (or navigate to desktop using folder list). 
35. Leave default file name and click Save button to create Flash file. 

36. HTML page should popup in a new browser window. 


37. Activate Alligator Flash Designer minimized window and choose Exit command to quit the program. Click 
"No" in "Save changes" prompt dialog. 


Creating Slide Shows 


To create a slide show from existing images choose "File" > "Wizards" > "Slide Show" command. Select 2 or 
more images. Hold Shift to select multiple images. Click OK. 


In the "Slide Show" options select desired transition effect "Fade", "Fly" etc. To add new frames click Add button. 
Click OK to create the slide show. 


Slide Show Options 


Frame Duration: ; Slides: 


Blue hills 
Sunset 

E Background Color Water lilies 

Winter 


Border: px Scale: 


Transition Effect 


Fade 


Speed: | Fast 


Cl Overlay 


Motion 


C] Rotate C] Zoom In/Out 


A new document will be created. Press F9 to preview the animation. If images are too large use lower scale for 
example 20% or 50%. 


To export the animation choose "File" > "Export Flash SWF File". Name swf file and click OK. Then export sample 
HTML page to view the animation in the browser. Choose "File" > "Export Web Page". The page will popup in a 
new browser window. 


Items and Layout 


Each frame may contain one or more items. 


Shapes Images Texts Buttons Sprites 


Selecting a single item 
h& Use the "Select" tool 


Click on an item to select it. To deselect the item click outside the item. to select, move, 
align and duplicate 
When one item is selected press TAB key to select the next item. Press items. 


SHIFT+TAB to select the previous item. 


Selecting 2 or more objects 
Choose the "Select" tool and draw a rectangle around items you want to select 


or Hold SHIFT key and click the item to add it to (or subtract it from) the selection. 


Duplicating Items 
To duplicate item(s) hold CTRL and move the item to create a copy. 
or 


Select the item and choose Edit > Duplicate. Specify the position of the new item and click OK. Change count 
value to create more than one copy. 


Positioning Items 

Drag the item(s) with the "Select" tool. Observe the status bar to view the distance. 
Moving an item vertically or horizontally 

Start dragging the item and hold SHIFT key to move the object horizontally or vertically. 
Precise Positioning 


Select items and use arrow keys to move items by 1 pixel left, up, right or down. Hold SHIFT and press arrow 
keys to move items faster (by 10 pixels) 


Use Edit > Move To command to place the item at x (horizontal) and y (vertical) coordinate. The top-left edge of 
the frame is at 0,0 coordinate. 


Use Edit > Move By to move items by x (right) and y (down) pixels 
Grid Positioning 


Choose View > Grid and check "Enable Grid". The default grid is 10 x 10 pixels. When you move any item it will 
snap to the grid. 


Aligning Objects 

To align an item to the page edge 

select the item and choose one of Edit > Align commands 
To center the item on the page 

select the item and choose Edit > Align > Center on Page 


Inserting rulers 
Use shortcut 


right click inside the frame area and choose Insert Horizontal Ruler or Insert buttons to align 
Vertical Ruler or choose "Insert" > "Rulers" to add 2 rulers at the center of the la| items faster 
page. a 
Moving rulers 3 

aoa 
choose the "Select" tool and drag the ruler or right click on the ruler and choose ba) 
Move command. Eg 


Removing rulers 


right click on the ruler and choose Delete command 


Sizing Objects 


Select the item and choose Item > Resize. Enter new size of the item. Uncheck Keep proportions to discard 
aspect ratio. 


or 
Select the item and drag one of its handles 

To fit the item to frame 

To resize the item to cover the entire frame select the item and choose Edit > Align > Fit to Frame 
Rotating Objects 


To specify the angle at which the item will be exported to Flash Player choose Item > Rotate > Angle. This 
rotation is not visible in the design mode. Press F9 to preview the item. 


Rotation is visible in preview only. 


To rotate the item so you can edit it later select the item and choose one of the Item > Rotate > commands. 
Only bitmap and polyline objects can be rotated. 


Rotation over a point 
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To rotate an item around a point select it and choose Item > Rotate > Rotate Arbitrary: 


Check Leave Original and enter iteration count 
(the number of copies). Calculate necessary angle 
(full circle is 360 degrees so rotate = 360 / 
(iterations + 1) ). Enter positive Y to rotate around 
the point below the item or positive X to rotate 
around the point to the right. You can experiment 
with the following values: 


Rotate: 90, Iterations: 
Rotate: 72, Iterations: 
Rotate: 60, Iterations: 
Rotate: 51, Iterations: 
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Rotate: 45, Iterations: 7 
Rotate: 40, Iterations: 8 
Rotate: 36, Iterations: 9 
Rotate: 33, Iterations: 10 
Rotate: 30, Iterations: 11 
Rotate: 28, Iterations: 12 
Rotate: 26, Iterations: 13 

: | Rotate: 24, Iterations: 14 
Iterations: 7 | Rotate: 22, Iterations: 15 


Rotate 


Rotation Center 


Rotate: |45 


Leave Original 


Mirroring Objects 


Select the item and choose Item > Placement Properties. Check Flip Horizontal or Flip Vertical option. Mirroring is 
exported to Flash Player and it is not visible in the design mode. Hit F9 to preview. 


To mirror the item so you can edit it later select the item and choose Item > Rotate > Flip command. Only 
bitmap and polyline objects can be mirrored. 


Grouping Items 


When you group 2 or more items you can move them as a single unit. To group items select 2 or more items and 
choose Edit > Group. 


Groups can be nested to any level so groups can be part of other groups. 


To ungroup items select the group and choose Edit > Ungroup. Any settings specific to the group (for example 
actions) will be discarded. 


Stacking Order and Ovelapping 

Stacking order defines how items overlap each other. Items on top will overlap other items. 

Sending items behind 

Select 1 or more items and choose Edit > Send to Back. The item will hide behind other items. 

Bringing items to front 

Select 1 or more items and choose Edit > Bring to Front. The item will be placed on top and overlap other items. 
Master (Template) Frames and Items 


To create a frame with shared objects choose "Movie" gt; "Add Master Frame" and place shared objects on the 
Master Frame. Master objects will appear beneath other items. To bring master items to front select the master 
item, choose "Item" > "Placement Properties" and change Layer to "Layer 1" or any layer above "Base layer". 


Frames 


Flash Designer is similar to PowerPoint. Each animation consists of one or more 
frames. By default the animation starts at the first frame, and goes from frame to 
frame until it reaches the end of the animation. Then it starts over. 


To set movie size Start 


The frame size is defined in pixels. Choose "Frame" > "Frame Size" and enter new 
width and height. 


FRAME 1 


To set frame duration 


FRAME 2 


To define how long the frame will appear on the screen choose "Frame" > "Frame 
Delay" command. 


To add a new frame 


FRAME 3 


Choose "Frame" > "Insert" 


Delay: fi -] = 


I Master Frame 
To change the active frame Backgound [EE 


Click the frame in the "Frame List". Frames are labeled "Frame 1", "Frame 2", etc. [Soig zl 


“| [z] 
Use PageDown, PageUp keys to scroll between frames. Press Ctrl+PageDn to go to the last aol 
frame, press Ctrl+PageUp to go to the first frame. Main Movie ‘fal 
[À Frame 1 


Li|Frame 2 


To rearrange frames 


To change the order of frames, select the frame in the "Frame List" and click move up or move down buttons: 


a i 
To change the background 


Choose "Frame" > "Background Color" and select a new color. 


To add "Next Frame" and "Previous Frame" buttons 


When the user clicks the button the movie will scroll to the next or to the previous 1 > 
frame. To add navigation buttons choose "Insert" > "Navigation" and select 
"Next" or "Previous" command. 


Master Frames 


Master frame and its items act as the background for other frames. For a simple document a single master frame 
is usually sufficient, for complex documents you can create multiple masters. 


Master Frame Example. Three laptops will appear on all frames: 


III 


Master Frame 
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Frame List x! 
y y Ss Delay: [Stop z| $ 
IV Master Frame 


Background: Color | 


[Solid 7] 


ra D PD an: 


Master Frame (1) 
4 Frame 1 
[C Frame 2 


To create a Master Frame 


Choose "Movie" > "Add Master Frame" and place shared objects on this frame. The frame will appear in the 
frame list as "Master Frame (1)" 


Background: Color 


Master Frame (1) fA 


Ballas 
Create a master frame, then select the frame to have the master background and change Main Movie mal 
the background to "Master Frame" 
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To set a Master Frame as the background 


Stop 


To stop the animation at specified frame choose "Stop" in the "Frames" toolbar. 


Start 


Frame List xi 


Delay: fStop] -| s. 


J Master Frame 
Background: Color | 


u ol @ 


Main Thread Ei 


[À Frame 1 
E) Frame 2 


FRAME 1 


FRAME 2 


FRAME 3 


Stop 
Frame Loop 


To change the default flow, you can specify a jump to other frame. To set the loop choose "Frame" > "Loop..." 
command. 
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Start 


FRAME 1 


Loop settings 


After this frame go to frame: 


FRAME 2 = 
[Frame2 = H Cancel | 


Loop 


FRAME 3 


Frame Appearance 


To change frame background choose "Frame" > "Background Color", "Border Color" and "Border Width" 
commands. 


Transparent Frame (No color) 


Choose "Frame" > "Background Color" and check "No Color" option. The background should change to 
"chessboard" to indicate transparency, so other website elements will appear beneath the animation. You have to 
embed the swf file in "windowless" mode. 


See also: Starting Flash movie at a frame 


Instances and Clones 


A clone is a copy of an item that you can put on another frame. To make a clone choose "Edit" > "Clone" > 
"Clone Item". 


Item Name 


You have to define item name (for example Rectangle1, Text2) so other items like clones can refer to the item. 
To rename the item name choose "Item" > "Placement Properties" or press F2. 


You can optimize existing document by converting items to clones. To convert an item to a clone choose "Edit" > 
"Clone" > "Convert to Clone". You will have to select the original item for the clone. The new clone will replace 
the existing item. 


To change the original item for a selected clone choose "Edit" > "Clone" > "Change Original". 
Placement Properties 


Placement properties define how the item appear in Flash Player. Choose "Item" > "Placement Properties" to 
change rotation or opacity of the item. These changes are not visible in the design view. 


Color balance 


Choose "Item" > "Color Balance" to apply RGB channel changes to an item, visible in Flash player only. 
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Original Item Clone Resized Red Blue Green Transparent 
Clone Clone Rotated Flipped Clone 
Clone Clone 


Rectangle Circle Polyline Closed Curved Multisegment 
Polyline Polyline Polyline 


Drawing Shapes 


Rectangles 


Choose the O tool, click on the frame and drag to draw a rectangle 


Squares 


Choose the O tool, hold Ctrl, click on the frame and drag to draw a square 


Ellipses 


Choose the © tool, click on the frame and drag to draw an ellipse 


Circles 


Choose the S tool, hold Ctrl, click on the frame and drag to draw a circle 
Rounded Rectangles 


Choose the @ tool, click on the frame and drag to draw a rectangle. Choose "Item" > "Edge Rounding" and 
enter the radius, click OK. The rectangle looks better if the outline is 2 or more pixels wide 


To change the width and the color of the outline 
Select the shape and choose "Item" > "Line Width" and "Line Color" 
See also: Gradient Fill 


See also: Bitmap (Texture) Fill 
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Drawing Lines 


Straight Lines 


Choose the © tool, click on the frame and drag to draw a straight line 


Horizontal or Vertical Lines 


Choose the © tool, hold SHIFT, click on the frame and drag to draw a straight line 


Curves 


Draw a Straight line as above, select the > tool, right click on the end node and choose "To Curve". The control 
node should appear, drag the handle to shape the line. You can also hold Ctrl when adding lines to existing 
shape. 


Stars, Hexagons and other shapes 
Choose "Insert" > "Shape or Line" and select one of the items to insert 
Creating Text Shape 


Choose "Insert" > "Text Shape", enter the text and click OK 
Node Editing 


To edit existing polyline nodes choose the A tool. Select a 
polyline to edit. Right click on a node so one of the 
segments gets bolder. Then choose "Insert", "Delete", "To 


Curve" or "Straighten" command from a popup menu. Node 
Control Node 
Converting a line to a curve | 
Straight Line < 
Right click on the node ending the line and choose "To ; 
Curve" —— 


Curve 


To shape a curve 


Choose the ® tool and drag the control node of the curve. End Nodes 


Straightening a curve 


Right click on the node at the end of the curve and choose 
"Straighten" 


To remove a node 

Right click on the node and choose "Delete" 

To add a node 

Right click on the node at the end of the line where a new node should appear and choose "Insert" 
Breaking the node 


Right click on the node and choose "Break". Drag the broken node to a new position. 
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Moving the node 


Choose the ® tool and drag the node 


Moving multiple nodes 


Choose the ® tool and drag a rectangle around nodes to select multiple nodes. Drag one of the selected nodes 
to move them. 


Removing the node 
Right click on the node and choose "Delete" 


To close an open line 
Select the line with the © tool, choose the © tool and draw a line between the end nodes. 
To join 2 separate lines 


Select both segments with rk tool and choose "Edit" > "Combine Shapes" command. Select the © tool and 
draw a line between the end nodes of each subpath. 


To combine segments 


o 
Select 2 or more shapes (1) and choose "Edit" > "Combine Shapes" to create combined shape (2). 
To break multisegment line 

Select the line and choose "Edit" > "Break Apart" command. 


Drawing freehand shape 


Choose the f tool, click on the frame and drag the mouse to draw a shape. 


Tracing 


Import a bitmap to trace. Choose the A tool and click inside a solid area of the bitmap to create a vector shape. 
The magic wand tool has a tolerance of 1 pixel. 


Clipping Path 
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A clipping path creates a mask and masks items ABOVE it (to clip an item put the clipping path below the item to 
clip with Edit > Send to Back) 


The following example shows 7 circles clipped by mouth shape. 


Line Width: [0 | 
PPINg. 


1 items above the path 


clippath.sfd 


To change clipping options double click the shape, check "Clip Shape" and specify how many items above the 
path should be clipped. 


q" x om 


no clipping clip count: 1 clip count: 2 


Working with Text 


Alligator can create vector (anti-aliased) fonts and raster (system) fonts. 


Anti-aliased text Screen-font text 


To add vector text 


To draw anti-aliased text choose the A tool. Click on the document, enter the text in the dialog and click OK. 


To add a text paragraph 
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Choose the 0 tool. Click and drag a rectangle enclosing the text. Enter the text and click OK to draw the text. 


To add a HTML text 


Choose the ®®° tool. Click and drag a rectangle enclosing the text. Enter the text and click OK to draw the text. 


To add a dynamic text 


Choose the ©! tool. Click and drag a rectangle enclosing the text. The use can enter the text in this field or you 
can set the content of the field with ActionScript. 


To add an artistic text 


Choose the A tool. Click on the frame and enter the text in the dialog box. 
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To change the text 


Choose the rk tool and double click the text to modify 


To change the font 


Choose the k tool, right-click on the text and choose "Set Font" 


To change text color 


Choose the k tool, right-click on the text and choose "Text Color" or click one of the palette colors. 


To enlarge or decrease the text by 10% 


Choose the k tool, select the text and click one of the buttons: 
AX 


HTML Text can be formatted with basic HTML tags like <B> (bold) or <U> (underlined): 


The following tags are allowed for 
HTML text: 

This is bold text 

This is italic text 

This text is underlined 


Font face: Times New Roman 


Font color: Red text 


Font resized: 16 pixels font 
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HTML tags: 


The following tags are allowed for HTML text: <br> 

<b>This is bold text</b><br> 

<i>This is italic text</i><br> 

<u>This text is underlined</u><br> 

Font face: <font face="times new roman">Times New Roman</font> <br> 
Font color: <font color="#FFO000">Red text</font><br> 

Font resized: <font size="16">16 pixels font</font><br> 


Paragraph Background 


Choose "Item" > "Line Width" to create outline and "Item" > "Fill Color" to create solid background beneath the 
HTML item. 


Textures 
To create a text shape choose "Insert" > "Text Shape", enter the text and click OK. 
To fill the text with gradient fill 


Choose "Insert" > "Text Shape", enter the text and click OK. Select the text shape and choose "Item" > 
"Gradient Fill" 


See also: 
Gradients 


To fill the text with a texture 


Choose "Insert" > "Text Shape", enter the text and click OK. Add master frame and import or paste the bitmap. 
Select the text shape and choose "Item" > "Bitmap Fill" 


TEXTURE 
GRADIENT 


See also: Bitmap Fill | Animating Text - Glyph Animations 
Sprites 


A sprite (known also as MovieClip) is a sub movie inside the main movie. Sprites can be nested to any depth. 
Each sprite has own frames and plays the same way as the main movie, but in its own timeline. 
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Creating a Blank Sprite 
Â 


Choose the R tool and draw a rectangle enclosing the sprite. Alligator Flash Designer 
will show the first frame of the sprite thread so you can add new frames, objects and The "Sprite" tool 
animations. 


To exit sprite thread choose "Movie" > "Go to Main Movie" command or hit Esc. To enter sprite thread double- 
click the sprite. 


To start the sprite 
The sprite will start playing once it appears on the screen. 
To play the sprite through entire movie 


To play a sprite through several frames place the sprite on a master frame. Choose Movie > Add Master Frame 
and draw or insert the sprite on this frame. 


Inserting Flash or GIF movies 


Choose "Insert" > "Flash" to load a sprite in SWF format. The clip will appear when the frame is displayed. You 
can use this command to split larger Flash files into smaller pieces. The movie will load when the frame is about 
to show. External clip can not be edited and it appears as a blank rectangle. You can see it in Flash preview only. 
Press F9 to preview the animation. 


Embeding SWF File 


Choose "Insert" > "Embeded SWF File" to insert data of Flash file. The file will be loaded and placed inside the 
main Flash file. 


Inserting GIF Animation 

Choose "Insert" > "GIF Animation" to create a sprite from animated gif. 

Loading Existing Flash Designer Clip 

Choose "Movie" > "Insert Flash Designer Clip" to create a sprite from existing Flash Designer file. 
Loading Cliparts 


Choose "Insert" > "Clipart" to load one of the predefined animations. 
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Sprite Example 


In the following example 3 sprites are defined - the bird, shaking egg and blinking question mark. 
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CD 


bird-egg.sfd 


Animating Objects 


When no animation is defined, each frame is static. In the following example the movie consists of 2 frames, 1 
second each: 


Start 


Intro Animation 

The Intro effect defines how the item appears on the frame. 
Outro Animation 

The outro effect defines how the item disappears. 

Quick Animations 


To add intro and outro animation, select the item and choose "Intro" or "Outro" menu and select one of the 
effects: 


intro-animations.sfd 


To add customized intro or outro animation, select the item and choose "Intro" > "Intro Animation" or "Outro" > 
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"Outro Animation" command. 


Select one of the effects "Fly", "Stretch", "Peek", "Cover" or "Rotate" and click OK. Press F9 to preview the 
animation. 


Intro Animation - Text1 


Enable Animation oe 
Direction: 


‘Fly In v [from Bottom-Left corner 


v 


Duration: 2 v| sec. Effect delay: [o | sec, 


Fade Text Animation 


C] Easing C2 way 


C] Rotation Cl Always Visible 


Cancel 


By default the animation takes 0.5 second. 

To speed-up the animation 

Decrease the duration time, increase to slow-down 
Fade 

This option causes the item to appear as transparent 
Easing 

The motion is accelerated (soft start) 

Rotation 

The item will rotate during the animation 

Blur 

The item will be out of focus 

2 way 

This option creates back and forth movement 
Always Visible 

The item will be visible before the animation starts 
Delay After 


The time after Intro animation ends and before the frame. The item with longer delay will end animation earlier 
than items with shorter delay. 
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Delay Before 


The time after the frame and before Outro animation starts. The item with longer delay will start start animation 
later than items with shorter delay. Use delay time to control the order of animations. 


Motion (In-frame) animation 


Motion settings define how the item moves during the frame, 
between intro and outro animation. 


To define in-frame animation for an item 


Select the item and choose "Animation" > "Motion" command. 
Select the speed and direction of the movement, rotation, rotation 
direction (CW or CCW) and scaling of the item (whether it should 
enlarge or decrease) 


To combine motion with intro and outro animation 
of the item 


Select the item and choose "Animation" > "Motion" command. 
Make sure "Intro" and "Outro" options are checked. 


Move on Path 


To move an item on a path choose Animation > Motion and select the path from the drop down list. You have to 
draw a path first. To hide the path select it and apply O line with to it. 


Timing Animations 


To change the length of the motion phase 
Intro Duration Frame Delay Outro Duration 


By default item will appear at 0% (beginning of the frame) and hide at 

100% (end of the frame). You can change values under Start At, Show | intro | Motion | outro | 
At, Stop At and Hide At or change the duration of the frame with 

"Frame" > "Frame Delay" 


Total Frame Time 
To change the length of the intro or outro phase 


Change the duration of the intro or outro effect with "Intro" > "Intro 
Animation" or with with "Outro" > "Outro Animation" 


Creating an Intro/ Outro Loop Sprite 


Use Intro/Outro Loop Sprite to create items that play infinitely. The item will use current Intro and Outro 
animation effect. Place the item on the frame to start the loop. Intro and Outro animation for the item will loop 
infinitely until the item disappears. 
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To create a loop 


To define an "Intro/Outro Loop Sprite", select the item and choose "Loop Animation" command located under the 
"Animation" menu. If no intro or outro effect exists you have to choose one of the predefined animations or set 
other intro and outro transformation. 


Define As Sprite 


Effect: [Rotate 360° 7] 


Cancel | 
Speed: [Medium -| 


Adjusting Intro/Outro Loop Sprite 


Select the item and choose "Intro" > "Intro Animation" to adjust the first phase of the animation. Choose "Outro" 
> "Outro Animation" to adjust the second phase of the animation. 


To specify the angle, zoom or movement of the Intro/Outro sprite 


Select the item and choose "Intro" > "Advanced Intro Animation" to adjust the first phase of the animation. 
Choose "Outro" > "Advanced Outro Animation" to adjust the second phase of the animation. 


Enter values in the "Start At" or "Stop At" area. Move X,Y is the start or the end offest of the movement (in 
pixels), Scale X,Y defines if the item should be resized (in percents), Control X,Y is added to the "control point" of 
the item to rotate or scale the item around a point. Default control point is the center of the item. 


To speed up or to slow down Intro/ Outro sprite 


Select the item and choose "Intro" > "Intro Animation", then change Duration value to change the speed of the 
first phase. Choose "Outro" > "Outro Animation" then change Duration value to change the speed of the second 
phase. Use low value to speed up the phase or high value to slow down. Duration defines how long the phase 
should take. 


To create a sprite that loops back and forth 
After you create the sprite select the item and choose "Intro" > "Intro Animation" and check "2 way" option. 
To create a sprite that fades in and out 


Select the item and choose "Intro" > "Intro Animation" and check "Fade" and "2 way" option. Then make sure 
"Animation" > "Loop Animation" is checked (check if necessary) 


Clipping Path for the Animation 


Intro or Outro animation effect can use additional clipping path. To change clipping options select the item and 
choose "Intro" > "Advanced Intro Animation" 


[No Clip v 
No Cli 
Animated Clip =| 
Delta x: |0 
Move your mouse over "No Clip", "Static Clip" and "Animated 
No Clip Clip" to see the difference. 
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No clipping path is used 


Static Clip z 
Alligator will add static clipping path No Clip 
around the item bounding box. It clips Static Clip 


the object being animated. 


Animated Clip 


Animated Clip 

Flash Designer adds a clipping path 
around the item and animates the 
clipping path instead of the item. 


clipeffects. sfd 


Frame Mixing 


To start intro animations on the next frame before outro animations end choose "Animation" > "Animation 
Properties" and change "Mix with previous Frame" value. 


See also: Text Animations | Effect synchronization | Tweening | In-frame animation 


Tweening 


Tweening moves an item to a new position and size. 
Unlike regular intro our outro animation, tween does 
not remove the item after finished. 


The item may either "tween-in" during the intro 

phase or "tween-out" during the outro phase. When 
creating the tween-out effect you have to select the 
"destination item" on the next frame. When creating 
tween-in effect you have to select the "source item" 


This is small picture. 
on the preceding frame. p 


To create a tween effect you need at least 2 frames. The tween animation will play between frames. 


Fame 1 Frame 2 Frame 3 


tween-in tween-out 


To create a simple tween effect 


Select the item and use "Edit" > "Clone" > "Clone to Frame" command. Check tween option and click OK. Move 
the clone on the next frame to other position (and/or resize) and choose "Movie" > "Play Animation" to see the 
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tween effect. 

To create a tween-in effect 

Select the item and choose "Intro" > "Tween In". Select the "source" item and click OK. 

To create a tween-out effect 

Select the item and choose "Outro" > "Tween Out". Select the "destination" item and click OK. 
Timing tween effects 


Select the item and choose "Intro" > "Advanced Intro Animation" or "Outro" > "Advanced Outro Animation" 
Change duration time (how long the animation should play) and click OK. 


To create a tween effect manually 


Duplicate or clone the item on 2 different frames. Select the second item (duplicated or cloned) and choose 
"Intro" > "Advanced Intro Animation". Select the first item from a list (in the tween options area), check both or 
one of tween position and size options. 


Position Size Rectangle1 v | 


H from Item: 


Tween with rotation 


Rotate by: 2 
ance 


The destination or source item can been rotated with "Item" > | Rotation is visible in preview only. 
"Rotate" > "Angle". In this case the tween animation will 
include rotation. 


Example of several tween animations. 


25 


Effect Synchronization 


By default all intro animations end at the same time and all outro animations start at the same time. 


Outro Sync 


Intro Sync 
Specify intro and outro delay time to get effects out of sync. 


Intro Delay 


ae h ar 


Outro Delay 


To set global delay for all items 


In the following example each circle has intro and outro animations defined: 
Intro Animation: Fly from Top 
Outro Animation: Fly to Top-Left 


Synchronous Animation Asynchronous Animation 


Choose "Animation" > "Effect Synchronization" and specify Animation Intervals in seconds. This is a delay 
between the end of each intro animation or between the start or each outro animation. 
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Effect Synchronization 


Synchronize Intros: (0.2 s (High) x] 
L 


Intro animations synchronized at 0.0 will end 
at the same time. 


Synchronize Outros: 0.5 s (Medium) Y 


Outro animations synchronized at 0.0 will start 
at the same time. 


Cancel 


The order of animations is determined by the stacking order. Items in front start first. To change stacking order 
select the item and choose Edit > Bring to Front or Send to Back. 


Timeline View 


Timeline: Frame 1 


- static 
- intro/outro animation Intro delay 


Frame Total: 2.1 sec. 


Intro animation 


Choose "Animation" > "Timeline" to view effect synchronization. 
White color - the object invisible, blue - the object is moving, gray - the object is static. 
To modify object timings in the timeline view 


Select the item and change: 

Intro or Outro duration (how long the item the object will move) 

Intro delay (the time between the end of the animation and the frame) 
Outro delay (the time between the frame and the start of the outro) 
Intro or Outro Intervals (desynchronization for intro or outro effects) 


To set individual delay for an item 


Select the item and choose "Animation" > "Intro Animation" or "Animation" > "Outro Animation" and change 
"Delay" value 


Animating Text Objects 


To animate letters separately select the text item and choose "Intro" > "Text Intro Animation". Select options 
and click OK. Then apply the effect for example "Intro" > "Span" 
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Text Animation 


M] Enable Glyph Animation 


n 
Interval; |1 Mj frames) 


Direction: | Center to Edges ~x] 


Transform by: Glyph Center | 


The above example demonstrates different Transform By options. 


Actions 


Actions will execute on one of the following events: 


> Mouse Click (when the user clicks an item) 
> Mouse Over (when the mouse cursor is moved over the item) 
> Mouse Out (when the mouse cursor leaves the item area) 


> Mouse Up (when the button is released after mouse click occurs) 
Creating web links 


Select the item and choose "Action" > "Edit Actions" or press Ctrl+K. Select GetURL option and type the link. The 
link should start with http:// 


You can not use \ instead of / 
To popup the link in a new window 


Change the target to "_blank". If the link is blocked by pop-up blocker use On Up action (On Click may trigger 
the pop-up blocker). 


To open the link in the same window 
Change the target to "_self" 
To create an email button 


Draw or create a button (you can choose "Insert" > "Symbol" and select the envelope symbol), choose "Action" 
> "On Click". Select GetURL option, delete "http://" and type the link: 


mailto:support@selteco.com 


To open the link in a HTML frameset 
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Type the name of the HTML frame under the Target: field 
To popup a PDF file in a new window 


Change the target to "_blank" and type the path to your PDF file. The PDF file must be available online. See also: 
http://www. flashdesignerzone.com/tutorials/t1047.php 


OnUp Action 

To define an action when the user clicks and releases the button, select the item and choose Action" > "On Up" 
OnClick Action 

To define an action when the user clicks the button, select the item and choose "Action" > "On Click". 
OnOver Color 


To define how the color should change when the user moves the mouse over the button, select "Action" > "On 
Over Color". Uncheck "No Color" box and select the new color. 


OnOver and OnOut Actions 


OnOver and OnOut actions will execute when the mouse enters and leaves the item respectively. 


4-example-button.sfd 
More Actions 
Click More Actions to add more actions to On Over, On Click, On Up and On Out handlers: 


>» Show Sprite to make a Sprite or Group visible 

> Hide Sprite to make a Sprite or Group invisible 

> Toggle Sprite to show and hide a Sprite or Group like a check box 
> Stop Sprite to end playing a sprite 


{v 


Play Sprite to start playing a sprite 

> Rewind Sprite to move the sprite to the first frame 
» Stop Sounds to mute all playing sounds 

> Message to write a text in an edit field 


Set to initialize a variable 


vw 


Move Sprite to change Sprite or Group position 
> Jump & Stop to scroll a sprite to desired frame 


> Jump & Play to start a sprite from desired frame 
ActionScripts 


To control the main movie from a sprite select the item inside the sprite, choose "Action" > "On Click", choose 
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ActionSript and type for example: 
_root.gotoAndPlay ("Frame 2"); 

To jump to Frame 2 of the main movie. 

The following actions are ActionScript equivalents: 


>» On Mouse Click = on(press) { ... } 
> On Mouse Over = on(rollover) { ... } 
> On Mouse Out = on(rollout) { ... } 


> On Mouse Up = on(release) { ... } 


When copying other scripts you don't have to enter on(press) definition, enter the content of the event only, for 
example instead of: 


on(press) { movieclipl._visible = true; } 
enter 

movieclipl._visible = true; 

To create a clickTag action 


The clickTag action is necessary to prepare the banner for ad tracking system. Add a master frame with Movie > 
Add Master Frame. Choose Insert > Clickable Area, select ActionScript option and enter the code: 


getURL(clickTag,"_blank") ; 


Resize the area to fill entire frame with Edit > Align > Fit to Frame. 


Buttons 


To add a button 

Choose the Button tool and draw a button on the frame 

To change the text label 

Double click the button with the Select tool, or press Enter key when the button is selected and edit the text. 
To customize the button 


Double click the button to customize it. 


glass-button.sfd 


To apply a style to a new button do the following: 


> Double click the button and type "OK" as the label 

> Choose Item > Text Color and set R:255 G:255 B:255, click OK 
> Choose Item > Line Width > 4px 

> Choose Item > Edge Rounding and put 6 as the radius, click OK 
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> Press Ctril+L and set line color to R:188 G:115 B:42 

>» Choose Item > Gradient Fill and select "Vertical" gradient style 

> Click Top Color and set R:255 G:255 B:255, click OK 

> Click Bottom Color and set R:255 G:102 B:0, click OK 

> Click Add Colors, select Point 4 and click Color 4, set R:182 G:75 B:0, click OK 
> Click OK and press F9 for a preview 


To change the shape of a button 


Double click the button and change the "shape" option. 


To change the over color 


Select the button and choose "Action" > "On Over Color", uncheck "No Color" and choose desired color. 


To change button appearance on mouse events 


Select the button and choose "Action" > "On Click Matrix" and "On Over Matrix". 


PRODUCTS PRODUCTS PRODUCTS PRODUCTS 


HOME PRODUCTS SERVICES ABOUT CONTACT HOME 


To change the click color 


Select the button and choose "Action" > "On Click Color", uncheck "No Color" and choose desired color. 


To change mouse over color 


Select the button and choose "Action" > "On Over Color", uncheck "No Color" and choose desired color. 
Simple 


Over Color Click a button 


Over & Click Color 


simple-buttons.sfd 
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HOME PRODUCTS SERVICES ABOUT CONTACT 


Example of combined "On Over Color" and "On Over Matrix". 


Image Background Button 


This example shows a clipart image used as button background. 


To create image background button: 


Import the image on a master frame 

Draw the button on the next frame 

Select the button and choose "Item" > "Edit Properties" 
Click "More" 

Set button background, set the bitmap in the "Custom 

Background" field and click OK 

Set Over Color (the button with change the color if the 

user moves mouse over it) 


OBRWNF 


> 


button-background.sfd 


Sprite Background Button 


The following example demonstrates how to use a sprite as button background. 


To create custom background button: 


1. Create a new project and add master frame 

Create a sprite background object on a master frame 

Add a new frame inside the sprite so you have Frame 1 

and Frame 2, set them to Stop 

4. Draw a rectangle on Frame 1 and copy it to Frame 2 

5. On Frame 2 change the color of the rectangle so you can 
see the difference between frames 

6. On Frame 1 set OnOver action as Go to Frame 2 

7. On Frame 2 set OnOut action as Go to Frame 1 

8. Exit the Sprite back to the Main Movie 

9 

0 

1 


WN 


Clone the Sprite to the Next frame 

Duplicate the clone several times to create more buttons 
Add description text over each clone (Home, Products 
etc) 


10. 
button-sprite.sfd 11. 


Bitmaps 
To paste a bitmap choose "Edit" > "Paste". To import an image choose "File" > "Import Image". 
Screenshots 


Press Print Screen key (press Alt+Print Screen to capture active window only). Paste the image into Alligator with 
"Edit" > "Paste" 


Web images 


Right click on the image in the browser window and choose Copy from the pop-up menu. Paste the image into 
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Alligator with "Edit" > "Paste" 

Rotating Images 

Select the image and choose "Item" > "Rotate" > "Angle". Click OK. Press F9 to preview rotated image. 
or 

Select the image and choose "Item" > "Rotate" > "Rotate Arbitrary". 

Image Outline 

Double click the image and enter Line Width. You can also click Line Color button to change the color. 
Importing JPEG files 

Choose "File" > "Import Image". Flash Designer will export JPEG images in compressed JPEG format. 
Bitmap Fill 


To fill a shape with a bitmap or texture choose "Item" > "Bitmap Fill" and choose the bitmap item. In no bitmap 
is available you will have to import it. 


f 


A 


Bitmap1 


Centered Tiled Tiled & Scaled Fit 


bitmapfill.sfd 


Bitmap Fill 


Bitmap Name: 


Delta x: 


Delta Y: 


Scale: 


*Bitmap Fill is not visible in design mode. 


Cancel 
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Resizing & Cropping 
To resize a bitmap choose the k tool 


To crop a bitmap choose the 28 tool: 


Select the bitmap and drag a handle to resize or to crop. 


Bucket Fill 
& 


Use bucket fill tool to fill pixels having the same color. Bucket fill has threshold = 1 (all pixels must be the same). 
Removing the background 


Erasing part of the bitmap manually 


Use the @ tool to make part of the bitmap transparent. Click inside the bitmap to remove pixels beneath the 
cursor. 


To avoid sharp edges 


If possible work on high-resolution bitmaps. When finished - downsample the image to lower resolution. For 
example if your target size is 400 x 400 pixels, you should work on at least 800 x 800 bitmap. Then choose 
"Item" > "Resize" to downsample the image to the final size. 


Erasing in bucket fill mode 


To erase a bitmap area of the same color hold CTRL key and click inside the area. It will erase pixels in "bucket 
fill" mode. In the following example white border was made transparent by using the "Eraser" tool in bucket fill 
mode. 


Opaque Bitmap Transparent Bitmap 


Transparent graphics 


Alligator is able to import transparent GIFs. 
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~ animation 


Loading External JPEG File 


Choose "Insert" > "Flash" to insert a JPEG loader. The file will be loaded only if the frame is displayed. Use this 
command to optimize the Flash file. 


Troubleshooting 


By default image has no border. If a thin line appears around the image despite no border is specified you have 
to define neutral border line, for example use 1 pixel white line around white background image. 


Gradients 
Gradient is a transition between 2 or more colors or between a color and transparency. 


Gradients may be applied to shapes or to buttons only. 


Gradient Styles 


radial horizontal vertical diagonal diagonal rotated 15° 


To apply a gradient fill to a shape 
Select the shape and choose "Item" > "Gradient Fill". Select a gradient style and modify both colors. 
Creating 3D look with vertical gradients 


To create 3D look apply vertical gradients to all items. Use light to dark and dark to light gradients. 


dark 


light 


Creating glows with transparent gradient: 
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To create a glow draw an ellipse and apply a radial gradient to it. Click Outer color 
and select "No color" option to define opaque to transparent gradient. 


candle-gradient. sfd 


Simulating 3D look with 2 gradient circles: 


Light gradient Q 


Shadow gradient 


radial-gradient.sfd 


Gradient Distances 


Gradients are defined from left to right or from top to bottom or from the center to the edge: 


Left Color Right Color 
0 Gradient Area 255 


Distance values control the position of the color in the gradient. By default gradient spans from 0 (left) to 255 
(right). To reduce gradient area click Advanced option and modify distance values so they are closer to each 
other. 


Left Color Right Color 


0 100 150 255 
Solid Red Gradient Area Solid Yellow 


To add more colors to the gradient click Add Colors. Multipoint gradients can have up to 8 control points. 
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Multipoint Gradient Eg 


I Point 3 O Color 3 Distance: [je 
I Point4 C] Color 4 Distance: [p2 
M Point 5 E Color 5 Distance: fios 
IV Point 6 LC] Color 6 Distance: fiaa 
IV Point 7 O Color 7 Distance: [216 
M Point 8 O Color 6 Distance: f180 


Cancel | 


See linear-gradient.sfd file in examples folder 


Exporting Flash Movies 


Alligator Flash Designer exports Flash movies in SWF format. 


a e a W 


Flash. swf index.htm swfobject.js  Website,sfd 


SWF contains images, sounds and other data necessary to play the movie under Flash Player 

HTM file tells the browser to load and display the movie 

SFD is the source project file 

JS is an optional file to prevent a warning message "click to activate this control" under Internet Explorer 


Testing your Flash file 


Choose "File" > "Export Web Page", save your SWF file if not saved yet. Select "Test page with HTML 
instructions" (default option). The web page should pop-up in a new browser window. 


To publish Flash as a website 


To create a Flash website you need 2 files. The Flash file (SWF) and the HTML file. The SWF file contains all 
images, sounds and vector data necessary to play the movie. The HTML file contains commands to load and 
display the movie. You have to upload both files to your Web server. 


Choose "File" > "Export Web Page", save SWF file as index.swf. Select "Website HTML page". The web page 
(index.htm) should pop-up in a browser window. 


Upload all files to your web server with FTP client or with Internet Explorer. 
Uploading files with Internet Explorer 


Open a new browser window. Type ftp://www.yourwebsite.com in the address bar. Internet Explorer will login to 
your website. 


If you get an error click OK to close the error message. Choose "File" > "Login As" and enter your FTP username 
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and password. Click OK. 


If the website opens, browse to the folder where your HTML files are located and drag your HTML file and your 
Flash file into the window. 


Uploading files with Selteco FTP Client 


Download Selteco FTP Client, install and launch it. Choose "Connection" > "New". Provide user name and 
password (obtain it from your hosting company). Upload both files (HTML and SWF) to the remote server. 


To add your Flash animation to existing web page 


1. Export your Flash file. 

Choose "File" > "Export Flash SWF File". Save the file in the folder with your html page. 
2. Generate HTML code. 

Choose "File" > "View HTML Code". Click Copy to copy the code to clipboard. 


HTML Code 


| <OBJECT CLASSID="clsid:D27CDB6E-4E6D-11cf-96B88-444553540000" 
CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" 
WIDTH="600" HEIGHT="400" > 

<PARAM NAME="MOVIE" VALUE="Untitled-1.swf"> 

<PARAM NAME="PLAY" VALUE="true"> 

<PARAM NAME="LOOP" VYALUE="true"> 

<PARAM NAME="QUALITY" VALUE="high"> 

<EMBED SRC="Untitled-1.swf" WIDTH="600" HEIGHT="400" PLAY="true" LOOP="true" WMODE="opaque" QUAL 
TYPE="application/x-shockwave-flash" 

PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"> 

</EMBED> 

</OBJECT> 


Insert Flash as: (HTML Object (requires a click to activate) {| 


Click "Copy" to copy the code to the clipboard. 


3. Paste HTML code. 
Open your html page with your web editor and paste the code. 


4. Preview. 
Preview your page in your browser to make sure the animation is visible. 
5. Upload. 


Upload both html page and SWF file to the web server. 
To pre-activate the Flash movie 


Internet Explorer will prompt to activate the control. To avoid this message change the option "Insert Flash as" 
and choose "JavaScript Object". Make sure you will upload the JS file with your Flash file. 


Sounds 


Before a sound can be used it must be imported. Choose "Movie" > "Import Sound" or drag sound file into Flash 
Designer document. Flash Designer supports WAV and MP3 sounds. To display currently loaded sounds choose 
"Movie" > "Sounds" command. 


Frame Sounds 


Frame sound starts playing when Flash player displays the frame. To define the sound choose "Frame" > "Frame 
Sound" command. By default the sound starts before the frame is displayed (after intro animations). To change 
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this change "Start Sound On" option. 
To add a background sound 


Choose "Movie" > "Import Sound" and select loop1.mp3 file (or your own soundtrack). Click OK to import it. 
Click OK in the Sounds list. Select the first frame of the movie (for example "Frame 1) and choose "Frame" > 
"Frame Sound" command. (If "Frame Sound" is grayed out you have to select the first non-Master frame in the 
Frame List). Click "Select Sound", select imported sound file and click OK. Hit F9 to test the sound. 


Exclusive sound mode 


Exclusive sound mode will stop other sounds playing and prevent playing 2 sounds simultaneously. Choose 
"Frame" > "Frame Sound" and change "Start Sound On" option to "Exclusive mode". 


Adjusting frame duration to the length of the sound 


Choose "Movie" > "Sounds" command, select the sound and read sound duration in seconds. Click Cancel. 
Choose "Frame" > "Frame Delay" and adjust "Show Frame for" to the length of the sound so the sound and the 
frame will finish at the same time. 


Event Sounds 


Event sounds will play when the user clicks an item. To define an event sound choose "Action" > "Sounds" 
commands. 


To assign a sound to a button 


Choose "Movie" > "Import Sound" and select one of the sound files (for example AIP.wav). Click OK to import it. 
Click OK in the Sounds list. Select the button and choose "Action" > "Sounds" > "On Click Sound". Select the 
sound file and click OK. Hit F9 to test the click. 


To remove the sound from the button 
Select the button and choose "Action" > "Sounds" > "On Click Sound". Select option and click OK. 
To stop the sound on click 


Select the button and choose "Action" > "Sounds" > "On Click Sound". Select the sound to stop and click "Stop" 
checkbox. Click OK. 


To create a button that stops all sounds (mute button) 


Draw or import a button. Select the button and choose "Action" > "On Click". Select More Actions and choose 
Stop Sounds, Click OK. 


Streaming Sound 


Choose "Insert" > "Audio Stream" to load and play MP3 file in streaming mode. The file will not be embeded in 
the SWF file but loaded from external source. Double click the item to edit properties. 


CETS > 00:00; 


WAV Soundtracks 


You can use WAV format sound files and place them in your Flash movie as streaming sound, music that plays in 
the background when movie is displayed. The WAV file must be saved in PCM compressed format. 
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To add the sound to the movie in Flash Designer: 


Open your animation in Flash Designer 

Choose "Movie" > "Sounds" 

Click "Browse" in "Background Sound" to browse for WAV file 
Specify how many times the sound should be played (default is 1) 
Click OK to confirm 


Or pew Nr 


Specifying the iteration count 

By default each sound is played once. If the animation loops after it comes to the end, the sound starts every 
time the animation loops. If you specify iteration count greater than one, the sound will play continously during 
the movie. 


File Optimization 


You can achieve better compression results by using lower sample rates of your sound file. If you choose stereo 
sound instead of mono the file will grow respectively. If your sound is 44kHz Stereo and you want to keep your 
SWF file small, use Sound Recorder to resample your sound to lower rate, for example 11kHz mono. 


To verify compression format: 


Open Sound Recorder from Start menu > All programs > Accessories. 
Open the WAV file in Sound Recorder. 

Choose File > Properties. 

The file should be compressed in PCM format. 

If not, click "Format Now" and choose PCM as the format. 
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File Optimization - How to keep your Flash file small 
If it takes too long to load your Flash movie try the following: 
To check the size of the Flash file 


Press F9 and read the size: 


Flash, 300 x 200. 5.62 kB (5758 bytes) Main Movie Bi Es 


If the Flash file is too large (for example over 1MB) try to optimize it: 


1. Use JPEG format for photos. Flash Designer can export JPEG in native format saving a lot of space. Import 
photos in JPEG not in GIF or BMP format. If you paste a photo using clipboard it will be exported in bitmap 
format. You can convert it to JPEG using "Item" > "Image" > "Convert to JPEG" command. 


To verify if the image is in JPEG format select it and read the message on the status bar: 


JPEG, 5.07 kB $I 263 x 196 (X15 Y:1) 


2. Use "External JPEGs". Import JPEG images with "Insert" > "External JPEG". The image will be exported to 
separate file and loaded only if it appears in the movie. To convert existing image select it and choose 
"Item" > "Image" > "Convert to External JPEG". External JPEG files will be exported to the same folder 
with your SWF file. 


3. Try to decrease frame rate. Higher frame rates produce larger files. Default frame rate is 20 FPS (frames 
per second). If you are not using sound you can reduce frame rate to 12 FPS. To change the rate choose 
"Movie" > "Export Options" > "Frame Rate". 


4. Try Image Optimization. If you turn it on Flash Designer will covert all non-JPEG images to 8 bit images 
and reduce the number of colors. To use image optimization switch it on in "Movie" > "Image 
Optimization". 
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Use clones wherever you can. If you duplicate a bitmap you should use a bitmap clone instead. 
Use text paragraphs or HTML text instead of vector text. Screen fonts take less space. 


Use Streaming Audio (Insert > Audio Stream). The sound file will not be embeded in the Flash file, instead 
Flash will load the sound while you watch the movie. 


Use MP3 sounds instead of WAV. If you use WAV sound try downsampling it to lower frequency using 
Windows Sound Recorder. Use mono sound instead of stereo wherever you can. Choose "Movie" > 
"Sounds" and review all sounds used in the project. Delete unnecessary sound files. 


Details: 


ID; 
Rate: 44100Hz2 Stereo 
Size: 261 kB 


Frames: 320 
Samples: 368640 
Duration: 8.4 sec. 
MPEG 1 Layer III 
256 kbps 
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